<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="240px">
        <el-row class="logo">
          <el-icon size="36px"><ElemeFilled /></el-icon>
          <span>医院预约管理后台</span>
        </el-row>
        <el-row>
          <navList></navList>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <el-row class="user">
            <el-dropdown @command="handleCommand" size="large">
              <div class="el-dropdown-link">
                <el-avatar :src="imgLogo"> user </el-avatar>
                <span>sam</span>
                <el-icon><ArrowDownBold /></el-icon>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="修改密码"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item command="退出" @click="tuchu"
                    >退出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-row>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- <el-footer>
          <a href="">@八尾前端工作室</a>
        </el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import imgLogo from "@/assets/logo.png";
import navList from "coms/home_wxq/navList.vue";

export default {
  props: {},
  components: { navList },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const { state, gecommit, getters, dispatch } = useStore();
    //用户头像触发
    const handleCommand = (command) => {
      ElMessage(` ${command}`);
    };
    const tuchu = () => {
      router.push("/login");
    };
    return {
      imgLogo,
      handleCommand,
      tuchu,
    };
  },
};
</script>
<style lang="scss" scoped>
.common-layout,
.el-container {
  height: 100%;
  width: 100%;
}
.el-aside {
  height: 100%;
  background-color: #0066ff;
  .logo {
    width: 100%;
    height: 120px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 20px;
    .el-icon {
      margin-right: 12px;
    }
  }
}
.el-header {
  background-color: #fff;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  .el-image {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgb(224, 224, 224);
    margin-right: 12px;
  }
  span {
    margin-right: 12px;
  }
}
.el-main {
  height: 100%;
  background-color: #e0e8e8;
  padding: 20px 28px 0;
  box-sizing: border-box;
}
.el-footer {
  height: 60px;
  text-align: center;
  background-color: #e0e8e8;
  a {
    color: #999;
    text-decoration: none;
    line-height: 60px;

    &:hover {
      color: #0066ff;
    }
  }
}
</style>
